import mammoth from 'mammoth';
import { ReactNode, useEffect, useState } from 'react';

export default (props: any) => {
  const [docxHtml, SetDocxHtml] = useState<ReactNode>();

  const generateCode = () => {
    if (docxHtml === undefined) {
      return <div></div>;
    } else {
      return (
        <div style={{ maxHeight: '300px', overflowY: 'scroll' }}>
          <div dangerouslySetInnerHTML={{ __html: `${docxHtml}` }}></div>
        </div>
      );
    }
  };

  const initHtml = async () => {
    const file = props?.url;
    const xhr = new XMLHttpRequest();
    xhr.open('get', file, true);
    xhr.responseType = 'arraybuffer';
    xhr.onload = (e) => {
      if (xhr.status === 200) {
        const data = new Uint8Array(xhr.response); // 可直接使用xhr.reponse
        mammoth
          .convertToHtml({ arrayBuffer: data })
          .then((result) => {
            SetDocxHtml(result.value);
          })
          .done();
      }
    };
    xhr.send();

    // const data = await mammoth.convertToHtml({
    //   path: ,
    // });
  };

  useEffect(() => {
    initHtml();
    console.log(typeof docxHtml);
  }, []);

  return generateCode();
};
